<template>
	<view class="padding_48rpx">
		<view class="edit flex-start-center padding-left_30rpx">
			<input class="uni-input" v-model="form.name" placeholder="请输入需要修改的标题" />


		</view>
		<view class="edit flex-start-center margin-top_20rpx padding-left_30rpx" v-if="link_type==3&&fixed_name=='在线客服'">
			<input class="uni-input" v-model="form.link" placeholder="请输入客服电话" />
		
		
		</view>
		<view class="edit flex-start-center margin-top_20rpx padding-left_30rpx" v-if="link_type==3&&fixed_name=='进入后台'">
			<input class="uni-input" v-model="form.link" placeholder="请输入进入后台链接" />
		
		
		</view>
		
		<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData"
			:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传图标"
			:uploadServerUrl="upPicUrl" ref="selectimgandupload1" @uploaded="imgLoaded1" @change="imgsChange1"
			:maxFileNumber="1"><template v-slot:icon>
				<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
			</template></sunui-upimg1>
		<view class="btnSure flex" @click="editFn()">
			编辑
		</view>

	</view>
</template>

<script>
	import {
		object2Url
	} from '@/utils/trans';
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,


				form: {
					name: '',
					icon: '',
					link: '',
					sort: '',
					desc: ''
				},
				fixed_name:'',
				imgFormData: null,
				ossInfo: null,
				upPicUrl: null,
				imgStr: [],

				storageMode: "2",
				header: null,
				token: uni.getStorageSync('login').token,
				isEdit: false,
				link_type:''
			}
		},
		onLoad(options) {
			if (options.id) {
                this.link_type = options.link_type
				this.fixed_name = options.fixed_name
				this.form.id = ''
				this.form.sort = ''
				this.$sun.assignObject(this.form, {
					...options
				})

				this.$nextTick(() => {
					this.$refs.selectimgandupload1.setItems([options.icon]);
				})

				this.isEdit = true
				console.log(this.form)

			}
		},
		methods: {
			// 
			async editFn() {

				if (!this.form.name) {
					this.$sun.toast('请填写标题', 'none')
				} else if (!this.form.icon) {
					this.$sun.toast('请上传图标', 'none')
				} else {
					const result = await this.$http.post({
						url: this.$api.editModule,
						data: {
							...this.form

						},
						headers: {
							'Authorization': `Bearer ${this.token}`
						}

					})
					if (result.code == 0) {
						this.$sun.toast(result.msg, 'none')
						setTimeout(() => {
							this.$sun.navBack()
						}, 500)
					} else {
						this.$sun.toast(result.msg, 'none')
					}
				}

			},
			// niuyun
			niuyunLoop(file, i) {
				if (i >= file.length) {
					return;
				}
				console.log(file)
				let fileUrl = file[i].url;
				this.upPicUrl = this.$api.qnyOssSignature;
				let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
				this.imgFormData = {
					file: fileUrl,
					getsize: file.size,
					getContentType: ['image/png', 'image/jpeg'],
					getoriginalfilename: filesNmae,
					getName: filesNmae
				};
				this.$nextTick(() => {
					this.$refs.selectimgandupload1.upload(); //图片上传
				});
				setTimeout(() => {
					this.niuyunLoop(file, i + 1);
				}, 2500);

			},
			delayLoop(file, i) {
				if (i >= file.length) {
					return;
				}
				console.log(file.length + '===chand1')
				if (file.length) {
					let fileUrl = file[i].url;
					console.log(fileUrl)
					this.timeDate = new Date().getTime();
					let markIndex = fileUrl.lastIndexOf('.');
					this.suffix = fileUrl.substring(markIndex); //后缀


					this.imgFormData = {
						name: this.timeDate + this.suffix,
						key: this.timeDate + this.suffix, //上传图片的名字和路径（默认路径根目录，自定义目录：xxx/xxx.png）
						policy: this.ossInfo.policy,
						OSSAccessKeyId: this.ossInfo.accessId,
						success_action_status: '200',
						signature: this.ossInfo.signature
					};
					this.header = {
						'Access-Control-Allow-Origin': '*',
						'x-oss-callback-Authorization': 'access_token'
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload1.upload(); //图片上传
					});

				} else {
					this.form.icon = ''
				}

				setTimeout(() => {
					this.delayLoop(file, i + 1);
				}, 500);
			},
			// 上传图片返回
			imgLoaded1(e) {
				console.log(e)

				this.img = [];
				for (let i = 0; i < e.length; i++) {
					this.img.push(e[i].url);
				}


				this.imgStr = this.img

				this.form.icon = this.imgStr.length === 1 ? this.imgStr[0].toString() : this.imgStr
					.join(',');
			},
			// “上传图片”发生改变
			imgsChange1(file) {

				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);
				if (file.length) {
					this.upPicUrl = this.$api.upload;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData = {
						file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload1.upload(); //图片上传
					});
				} else {
					this.form.icon = '',
						this.imgStr = []
				}
			},
			// 阿里云上传
			async userOssSignature(file) {
				// 文件名
				if (file.length) {
					console.log('this阿里云上传进入=======');
					const ts = new Date().getTime();
					const us = {
						ts
					};
					// let url = this.$api.alyOssSignature + `${object2Url(us)}`;
					let url = 'https://yjykmaster.admin168.net/door-massage/massage/upload/alyOssSignature' +
						`${object2Url(us)}`;

					const res = await this.$http.get({
						url: url,
						data: {
							us: us
						}
					});
					this.ossInfo = res.data;
					this.upPicUrl = this.ossInfo?.host;
					// 获取上传图片名称和后缀
					this.delayLoop(file, 0);
				} else {
					this.form.icon = '',
						this.imgStr = []
				}




			},
		}
	}
</script>

<style lang="less" scoped>
	.edit {

		height: 108rpx;
		background: rgb(246, 248, 255);



	}

	.btnSure {
		width: 655rpx;
		height: 76rpx;
		background: rgb(81, 142, 247);
		color: rgb(255, 255, 255);
		border-radius: 108rpx;
		font-size: 32rpx;
		font-weight: 700;
		position: fixed;
		bottom: 20rpx;
	}

	page {
		background: #fff;
	}
</style>